<template>
  <div id="officialPublication">
    <div class="offPubMainOut">
		<div class="titConts">
          <div class="leftBack"></div>
          <div class="flexContd">
            <p>PRODUCTS & SERVICE</p>
            <span></span>
            <p>产品与服务</p>
          </div>
        </div>

      <div class="offPubMain">

        <div class="mainCont">
          <div class="divUlCont">
            <ul>
              <li @click="routerUp('/CreatAPool')">CREAT A POOL</li>
              <li >POOL ATTRUBUTES</li>
              <li style="background: linear-gradient(90deg, #0BC288, #FFF664);">PAYMENT DEtAILS</li>
              <li @click="routerUp('/Extract')">CONFIRMATION</li>
            </ul>
          </div>
          <div class="lisicinre">
            <div class="depositContent">
              <div class="depositContent1">
              <p class="tit">你想存入多少钱</p>
              <p class="desc">在这里您可以设置存款金额。您可以手动输入特定的金额或使用下面的百分比按钮。</p>
              <input type="text" v-model="selecVal">
              <div class="baifenBlockCont">
                <div
                    :class="selecIndex == 25 ? 'baifenBlock1' : 'baifenBlock'"
                    @click="cunNumFunc(25)"
                  >
                    25%
                  </div>
                  <div
                    :class="selecIndex == 50 ? 'baifenBlock1' : 'baifenBlock'"
                    @click="cunNumFunc(50)"
                  >
                    50%
                  </div>
                  <div
                    :class="selecIndex == 75 ? 'baifenBlock1' : 'baifenBlock'"
                    @click="cunNumFunc(75)"
                  >
                    75%
                  </div>
                  <div
                    :class="!selecIndex ? 'baifenBlock1' : 'baifenBlock'"
                    @click="cunNumFunc()"
                  >
                    MAX
                  </div>
              </div>
              <div class="flexContText">
                <div>
                  <span>奖金池</span>
                  <span>0 Fild</span>
                </div>
                <div>
                  <span>奖金池</span>
                  <span>0 Fild</span>
                </div>
                <div>
                  <span>存款年利率</span>
                  <span>0</span>
                </div>
                <div>
                  <span>作为风险保险</span>
                  <span style="color: #61FFB3;">是的</span>
                </div>
              </div>
              </div>
            </div>
            <div class="creatBtnCont">
                <button class="creatBtn" @click="stakeFunc">继续</button>
              </div>
          </div>
        </div>
      </div>
    </div>
    <footer-con />
  </div>
</template>
<style lang="scss" scoped>
@import "@/asserts/styles/officialPublication/officialPublication.scss";
</style>
<script>
import FooterCon from "@/containers/common/Footer.vue";
const Web3Utils = require("web3-utils");
let NoMintRewardPool = require("../NoMintRewardPool.json");
export default {
  data() {
    return {
      selecIndex: "",
      balanceOf: "",
      selecVal: "0",
    };
  },
  methods: {
    // 路由跳转
			routerUp(uri) {
				this.$router.push({
					path: uri
				});
      },
      cunNumFunc(num) {
      this.selecIndex = num;
      this.selecVal = this.balanceOf;
      if (num) {
        this.selecVal = (this.balanceOf * num) / 100;
      }
    },
    stakeFunc() {
      let _this = this;
      let valueToWei = Web3Utils.toWei(this.selecVal);
      let valueToHex = Web3Utils.toHex(valueToWei);
      console.log("value", valueToWei, valueToHex);
      window.myWeb3.eth.getAccounts(function (error1, accounts) {
        if (error1) throw error1;
        console.log("accounts", accounts);
        window.contractInstanceErc20.approve(
          NoMintRewardPool.contractAddress,
          valueToHex,
          { from: accounts[0] },
          function (error2, txnHash) {
            if (error2) throw error2;
            console.log("txnHashtxnHashtxnHashtxnHash", txnHash);
            window.contractInstance.stake(
              valueToHex,
              function (error3, stakeTxnHash) {
                if (error3) throw error3;
                console.log("Staked", stakeTxnHash.toString());
                _this.open(stakeTxnHash.toString())
              }
            );
          }
        );
      });
    },
    open(hash) {
        this.$alert('交易hash： '+hash+' ', '质押提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push({path: '/'});
          }
        });
      }
  },
  components: {
    "footer-con": FooterCon,
  },
  computed: {

  },
};
</script>
